<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-03-20 23:00:39
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-04-29 20:20:01
 * @FilePath: \starter-3\pages\userPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import {ref} from "vue";
import {useRouter} from "#vue-router";
const router = useRouter()

// 跳转各子菜单
const currentMenu = ref('');

const goMenu = (item) =>{
  currentMenu.value = item.key;
  router.push({path: '/userPage/'+item.link});
}

onMounted(()=>{
  // 获取当前URL路径
  const currentPath = window.location.pathname;
  
  // 从路径中提取子路由名称
  const pathParts = currentPath.split('/');
  const subRoute = pathParts[pathParts.length - 1];
  console.log('subRoute',subRoute)
  // 查找匹配的菜单项
  const matchedMenuItem = menuItems.find(item => item.link === subRoute);
  
  if (matchedMenuItem) {
    // 如果找到匹配的菜单项，则跳转到对应的子路由
    goMenu(matchedMenuItem);
  } else {
    // 如果没有找到匹配的菜单项，则默认跳转到基本资料
    goMenu({key: 'myInfo', label: '我的信息', icon: 'Message', link: 'myInfo',},);
  }
})

const menuItems = [
  // {key: 'workspace', label: '工作台', icon: 'Monitor', link: '',},
  // {key: 'basicInformation', label: '基本资料', icon: 'User', link: 'basicInformation',},
  {key: 'myInfo', label: '我的信息', icon: 'Message', link: 'myInfo',},
  {key: 'navigation', label: '我的导航', icon: 'Compass', link: 'navigation',},
  {key: 'myActivities', label: '我的活动', icon: 'Collection', link: 'myActivities',},
  {key: 'collection', label: '我的收藏', icon: 'Star', link: 'myCollection',},
  {key: 'following', label: '我的关注', icon: 'Heart', link: 'myFollowing',},
  {key: 'overseasCalendar', label: '出海日历', icon: 'Calendar', link: 'overseasCalendar',},
 
  // {key: 'message', label: '我的帖子', icon: 'Message', link: 'myPosts',},
  // {key: 'forumPosting', label: '论坛帖子', icon: 'Document', link: 'forumPosting',},
  // {key: 'pointsRecord', label: '积分记录', icon: 'Document', link: 'pointsRecord',},
];
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex min-h-[1024px]" style="max-width: 1280px;margin: 0 auto">
      <!-- 左侧导航 -->
      <div class="w-64 bg-white border-r border-gray-200 py-6">
        <div class="space-y-2">

          <div v-for="(item, index) in menuItems" :key="index"
               class="flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 cursor-pointer"
               :class="{ 'bg-blue-50 text-blue-600': currentMenu === item.key }"
               @click="goMenu(item)">
            <el-icon class="mr-3 text-lg">
              <component :is="item.icon"/>
            </el-icon>
            <span class="text-sm">{{ item.label }}</span>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="flex-1 bg-white">
        <NuxtPage/>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>